/*
 * @Author: yangrongxin
 * @Date: 2021-09-17 14:40:55
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-30 09:20:45
 */
import { useEffect, useReducer, useRef } from 'react';
import { View, Text, Button, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { connect } from 'react-redux';
import { validPassword } from '../../service';
import styles from './index.module.less';

function reducer(state, action) {
  if (action.type === 'update') {
    return {
      ...state,
      ...action.payload,
    };
  }
}

const PasswordPanel = (props: any) => {
  const {
    name,
    evaluationId,
    measureTableId,
    evaluationType,
    measureTableRecordId,
    onFinish,
    onClose,
    dispatch: propsDispatch,
    isOpened,
  } = props;

  const [state, dispatch] = useReducer(reducer, {
    first: '',
    second: '',
    third: '',
    fourth: '',
  });

  const { first, second, third, fourth } = state;

  const firstRef = useRef<any>();
  const secondRef = useRef<any>();
  const thirdRef = useRef<any>();
  const fourthRef = useRef<any>();

  // 更新对应的输入框数据
  const updateInputValue = (payload: any) => {
    dispatch({
      type: 'update',
      payload,
    });
  };

  // 提交当前的密码数据 开始测评
  const startTest = () => {
    if (!first || !second || !third || !fourth) {
      Taro.showToast({
        title: '请输入完整的测评密码！',
        icon: 'none',
      });
      return;
    }
    const realPassword = `${first}${second}${third}${fourth}`;
    // TODO: 完成密码验证之后的逻辑
    validPassword({
      hospitalEvaluationId: evaluationId,
      password: realPassword,
    }).then((res: any) => {
      propsDispatch({
        type: 'evaluation/updatePassword',
        payload: {
          password: realPassword,
        },
      });
      if (res) {
        onClose && onClose();
        onFinish && onFinish(true);
        // 清空当前的输入数据
        updateInputValue({
          first: '',
          second: '',
          third: '',
          fourth: '',
        });
      }
    });
  };

  useEffect(() => {
    // if (isOpened) firstRef?.current?.focus();
    if (!isOpened) {
      firstRef?.current?.blur();
      secondRef?.current?.blur();
      thirdRef?.current?.blur();
      fourthRef?.current?.blur();
    }
  }, [isOpened]);

  return (
    <View className={styles.container}>
      {/* 展示顶部的提示 */}
      <View className={styles.header}>
        <Text>输入导诊单上的测评密码</Text>
      </View>
      {/* 展示中间的密码输入框 */}
      <View className={styles.passwordContent}>
        <Input
          value={first}
          type="number"
          maxlength={1}
          confirmType="next"
          ref={firstRef}
          cursorSpacing={100}
          holdKeyboard
          onInput={(e: any) => {
            const val = e?.detail?.value;
            if (val) secondRef?.current?.focus();
            updateInputValue({ first: val });
          }}
        />
        <Input
          value={second}
          type="number"
          maxlength={1}
          confirmType="next"
          ref={secondRef}
          cursorSpacing={100}
          holdKeyboard
          onInput={(e: any) => {
            const val = e?.detail?.value;
            if (val) thirdRef?.current?.focus();
            else firstRef?.current?.focus();
            updateInputValue({ second: val });
          }}
        />
        <Input
          value={third}
          type="number"
          maxlength={1}
          confirmType="next"
          ref={thirdRef}
          cursorSpacing={100}
          holdKeyboard
          onInput={(e: any) => {
            const val = e?.detail?.value;
            if (val) fourthRef?.current?.focus();
            else secondRef?.current?.focus();
            updateInputValue({ third: e?.detail?.value });
          }}
        />
        <Input
          value={fourth}
          type="number"
          maxlength={1}
          confirmType="done"
          ref={fourthRef}
          cursorSpacing={100}
          holdKeyboard
          onInput={(e: any) => {
            const val = e?.detail?.value;
            if (!val) thirdRef?.current?.focus();
            updateInputValue({ fourth: e?.detail?.value });
          }}
        />
      </View>
      {/* 展示底部的开始测评按钮 */}
      <Button onClick={startTest}>开始测评</Button>
    </View>
  );
};

export default connect(({ evaluation }) => ({ ...evaluation }))(PasswordPanel);
